<html>

<head>
    <link href="./index.css" rel="stylesheet"/>
    <script type="text/javascript" src="./index.js"></script>
    <title>通义万相API调用示例</title>
    <link rel="icon" href="https://img.alicdn.com/tfs/TB1_ZXuNcfpK1RjSZFOXXa6nFXa-32-32.ico" type="image/x-icon">
    <link href="https://g.alicdn.com/code/lib/bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"
          crossorigin="anonymous">
</head>

<body>
<div class="help-body-full-column">
    <div class="center-container">
        <h1>
            通义万相API调用示例 <a href="https://help.aliyun.com/zh/dashscope/developer-reference/tongyi-wanxiang"
                                   target="_blank">通义万相官方文档</a>
        </h1>
        <div class="btn-group top-tool" role="group">
            <button type="button" class="type-btn btn btn-primary btn-sm" onclick="changeType(1)">文本生成图像</button>
            <button type="button" class="type-btn btn btn-outline-primary btn-sm" onclick="changeType(2)">涂鸦作画
            </button>
            <button type="button" class="type-btn btn btn-outline-primary btn-sm" onclick="changeType(3)">人像风格重绘
            </button>
        </div>
        <div class="form-container">
            <!--文本生成图像-->
            <form id="form-1" action="api/text-to-image">
                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <td colspan="2">
                            <h3>文本生成图像</h3>
                        </td>
                    </tr>
                    <tr>
                        <td width="150">生成图片规格: <em>*</em></td>
                        <td>
                            <label class="form-check-label">
                                <input type="radio" name="size" value="1024*1024" checked/>1024*1024
                            </label>
                            <label class="form-check-label">
                                <input type="radio" name="size" value="720*1280"/>720*1280
                            </label>
                            <label class="form-check-label">
                                <input type="radio" name="size" value="1280*720"/>1280*720
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td>生成图片数量: <em>*</em></td>
                        <td>
                            <label><input type="radio" name="num" value="1" checked/>1张</label>
                            <label><input type="radio" name="num" value="2"/>2张</label>
                            <label><input type="radio" name="num" value="3"/>3张</label>
                            <label><input type="radio" name="num" value="4"/>4张</label>
                        </td>
                    </tr>
                    <tr>
                        <td>生成图片风格: <em>*</em></td>
                        <td>
                            <label><input type="radio" name="styles" value="<auto>" checked/>默认</label>
                            <label><input type="radio" name="styles" value="<3d cartoon>"/>3D卡通</label>
                            <label><input type="radio" name="styles" value="<anime>"/>动画</label>
                            <label><input type="radio" name="styles" value="<chinese painting>"/>中国画</label>
                            <label><input type="radio" name="styles" value="<flat illustration>"/>扁平插画</label>
                            <label><input type="radio" name="styles" value="<oil painting>"/>油画</label>
                            <label><input type="radio" name="styles" value="<sketch>"/>素描</label>
                            <label><input type="radio" name="styles" value="<watercolor>"/>水彩</label>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">描述图片的提示词信息: <em>*</em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提示词: <a href="javascript:text2img()">示例填充</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:clearText2img()">清空示例</a></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                <textarea class="form-control" name="prompt" cols="50" rows="2"
                          id="text2img_prompt"
                          placeholder="支持中英文，长度不超过500个字符，超过部分会自动截断。"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">图片中不想出现的内容描述词信息:</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                <textarea class="form-control" name="negativePrompt" cols="50" rows="2"
                          id="text2img_negativePrompt"
                          placeholder="支持中英文，长度不超过500个字符，超过部分会自动截断。"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align: center;">
                            <button class="btn btn-primary" onclick="submitForm(1); return false;">提交</button>
                        </td>
                    </tr>
                    <tr style="display: none" id="tr-1">
                        <td colspan="2">
                            <div id="result-1" class="img-list"></div>
                        </td>
                    </tr>
                </table>
            </form>
            <!--涂鸦作画-->
            <form id="form-2" action="api/graffiti-painting" style="display: none">
                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <td colspan="2">
                            <h3>涂鸦作画</h3>
                        </td>
                    </tr>
                    <tr>
                        <td width="150">生成图片规格: <em>*</em></td>
                        <td>
                            <label>
                                <input type="radio" name="size" value="768*768" checked/> 768*768
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td>生成图片数量: <em>*</em></td>
                        <td>
                            <label><input type="radio" name="num" value="1" checked/>1张</label>
                            <label><input type="radio" name="num" value="2"/>2张</label>
                            <label><input type="radio" name="num" value="3"/>3张</label>
                            <label><input type="radio" name="num" value="4"/>4张</label>
                        </td>
                    </tr>
                    <tr>
                        <td>生成图片风格: <em>*</em></td>
                        <td>
                            <label><input type="radio" name="styles" value="<3d cartoon>" checked/>3D 卡通</label>
                            <label><input type="radio" name="styles" value="<anime>"/>二次元</label>
                            <label><input type="radio" name="styles" value="<oil painting>"/>油画</label>
                            <label><input type="radio" name="styles" value="<watercolor>"/>水彩</label>
                            <label><input type="radio" name="styles" value="<flat illustration>"/>扁平插画</label>
                        </td>
                    </tr>
                    <tr>
                        <td>涂鸦内容描述: <em>*</em></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                <textarea name="prompt" class="form-control" cols="50" rows="2"
                          placeholder="支持中英文，中文不超过75个字，英文不超过75个单词，超过部分会自动截断。"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>涂鸦: <em>*</em></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <p>
                                <button class="btn btn-outline-primary btn-sm" onclick="clearCanvas(); return false;">
                                    清空涂鸦
                                </button>
                                <button class="btn btn-outline-info btn-sm"
                                        onclick="convertCanvasToImage(); return false;">下载涂鸦
                                </button>
                            </p>
                            <canvas id="drawingCanvas" width="1000" height="600" style="border: 1px solid #ccc">sss
                            </canvas>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align: center;">
                            <button class="btn btn-primary" onclick="submitForm(2); return false;">提交</button>
                        </td>
                    </tr>
                    <tr style="display: none" id="tr-2">
                        <td colspan="2">
                            <div id="result-2" class="img-list"></div>
                        </td>
                    </tr>
                </table>
            </form>
            <!--人像风格重绘-->
            <form id="form-3" action="api/image-generation" style="display: none">
                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <td colspan="2">
                            <h3>人像风格重绘</h3>
                        </td>
                    </tr>
                    <tr>
                        <td width="150">生成图片风格: <em>*</em></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <label><input type="radio" name="styleIndex" value="0" checked/>复古漫画</label>
                            <label><input type="radio" name="styleIndex" value="1"/>3D童话</label>
                            <label><input type="radio" name="styleIndex" value="2"/>二次元</label>
                            <label><input type="radio" name="styleIndex" value="3"/>小清新</label>
                            <label><input type="radio" name="styleIndex" value="4"/>未来科技</label>
                            <label><input type="radio" name="styleIndex" value="5"/>国画古风</label>
                            <label><input type="radio" name="styleIndex" value="6"/>将军百战</label>
                            <label><input type="radio" name="styleIndex" value="7"/>炫彩卡通</label>
                            <label><input type="radio" name="styleIndex" value="8"/>清雅国风</label>
                            <label><input type="radio" name="styleIndex" value="9"/>喜迎新年</label>
                        </td>
                    </tr>
                    <tr>
                        <td>图片: <em>*</em></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input class="form-control-file" type="file"
                                   accept="image/jpeg, image/png, image/jpg, image/bmp, image/webp" name="image"/>
                            <ul class="info">
                                <li>分辨率: 可支持输入分辨率范围: 不小于256*256，不超过5760*3240,
                                    长宽比不超过1.5:1，若超出1.5:1将自适应裁剪到1.5:1
                                </li>
                                <li>为确保生成质量，请上传脸部清晰照片，人脸比例不宜过小，并避免夸张姿势和表情</li>
                                <li>类型: JPEG，PNG，JPG，BMP，WEBP</li>
                                <li>大小: 不超过10M</li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align: center;">
                            <button class="btn btn-primary" onclick="submitForm(3); return false;">提交</button>
                        </td>
                    </tr>
                    <tr style="display: none" id="tr-3">
                        <td colspan="2">
                            <div id="result-3" class="img-list"></div>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <!-- Loading 弹出框 -->
        <div id="loadingModal" class="loading-modal" style="display: none">
            <div class="loading-container">
                <div class="loading-spinner"></div>
                <div class="message">处理中，预计15~30秒完成，请稍候！</div>
            </div>
        </div>
        <!-- 大图模态框，初始隐藏 -->
        <div id="imageModal" style="display:none;">
            <span id="closeModal">&times;</span> <!-- 关闭按钮 -->
            <img id="largeImage" src="">
        </div>
        <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
            <div class="toast-body" onclick="hideToast()">
            </div>
        </div>
    </div>
</div>
</div>
</body>

</html>